import React, { useEffect, useRef, useState } from 'react'
import './leftMenu.scss'
import { useHistory } from "react-router-dom";
import * as ACTCreator from '@store/actionCreators'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'

export const LeftMenu = connect(
    state => ({
        main: state.main,
    }),
    dispatch => ({
        setLeftMenuRouter: val => dispatch(ACTCreator.setLeftMenuRouter(val))
    }))(
    React.memo(
        props => {

            let history = useHistory()
            
            const { 
                leftMenuData
             } = props.main

            const [scrollTop, setScrollTop] = useState(0)
             //点击左边的组件列表
            const handleClickMenu = (sitem, index, sindex) => {
                history.push(sitem.link)
            }
            const leftMenuRef = useRef()
            useEffect(() => {
                window.onscroll = () => {
                    let scrollTop = document.documentElement.scrollTop
                    setScrollTop(() => scrollTop)
                }
            }, [])

            const {
                currentLeftMenu,
                headerHeight
            } = props.main
    
            return  <div ref={leftMenuRef} className={`left_menu_wrapper ${props.className}`}>
                        <CSSTransition
                            in={scrollTop > headerHeight}
                            classNames="fiex_left_menu"
                            appear
                            timeout={0}
                        >
                            <div>
                                <h3><svg t="1607268108697" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5953"><path d="M534.4 905.6h-44.8l-70.4-70.4 22.4-54.4c32 0 57.6-25.6 57.6-57.6s-25.6-57.6-57.6-57.6-57.6 25.6-57.6 57.6l-54.4 22.4-195.2-195.2v-44.8l128-128 54.4 19.2c3.2 28.8 28.8 48 57.6 48 32 0 57.6-25.6 57.6-57.6 0-28.8-22.4-54.4-48-57.6l-19.2-54.4 128-128h44.8l32 32c19.2-38.4 60.8-64 108.8-64 67.2 0 121.6 54.4 121.6 121.6 0 48-25.6 86.4-64 108.8l156.8 156.8v44.8L800 640c32 22.4 54.4 60.8 54.4 102.4 0 67.2-54.4 121.6-121.6 121.6-41.6 0-80-22.4-102.4-54.4l-96 96z m-32-76.8l9.6 9.6 105.6-105.6 54.4 19.2c3.2 28.8 28.8 51.2 57.6 51.2 32 0 57.6-25.6 57.6-57.6 0-28.8-22.4-54.4-51.2-57.6l-19.2-54.4 105.6-105.6-176-176 25.6-54.4h3.2c32 0 57.6-25.6 57.6-57.6s-25.6-57.6-57.6-57.6-57.6 25.6-57.6 57.6v3.2l-54.4 25.6L512 217.6 441.6 288c32 22.4 51.2 57.6 51.2 99.2 0 67.2-54.4 121.6-121.6 121.6-41.6 0-76.8-19.2-99.2-51.2l-70.4 70.4 134.4 134.4c22.4-35.2 60.8-60.8 105.6-60.8 67.2 0 121.6 54.4 121.6 121.6 0 44.8-25.6 83.2-60.8 105.6z" fill="#32b5e9" p-id="5954"></path></svg>组件一览</h3>
                                <div className="left_menu_content">
                                    {
                                        leftMenuData.map((item, index) =>
                                            <div className={`lv_01`} key={`lv_01${index}`}>
                                                <h5 className={`${currentLeftMenu.index === index ? 'lv_01_active' : ''}`}>{item.label}</h5>
                                                <ul className="lv_02">
                                                    {
                                                        item.children.map((sitem, sindex) => 
                                                            <li 
                                                                className={`${(currentLeftMenu.sindex === sindex && currentLeftMenu.index === index) ? 'lv_02_active' : ''}`}
                                                                onClick={() => handleClickMenu(sitem, index, sindex)}
                                                                key={`lv_02${sitem.title}`}>
                                                                {sitem.title} / <span>{sitem.subTitle}</span>
                                                            </li>
                                                        )
                                                    }
                                                </ul>
                                            </div>
                                        )
                                    }
                                </div>
                            </div>
                        </CSSTransition>
                    </div>
        }
    )
)